<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./zrender.min.js"></script>
  <style>
    #box{
      width: 100%;
      height: 300px;
      background-color: #000;
    }
  </style>
</head>
<body>
  <div id="box"></div>
</body>
</html>
<script>
  let zr = zrender.init(document.getElementById('box'));
  let w = zr.getWidth();
  let h = zr.getHeight();

  let text2 = new zrender.Text({
    style:{
      text:'珠峰培训',
      textAlign:'center',
      textVerticalAlign:'middle',
      fontSize:100,
      fontWeight:'bolder',
      textFill:"red",
    },
    position:[w/2+5,h/2]
    // x:w/2,
    // y:h/2
  })
  zr.add(text2)
  let text1 = new zrender.Text({
    style:{
      text:'珠峰培训',
      textAlign:'center',
      textVerticalAlign:'middle',
      fontSize:100,
      fontWeight:'bolder',
      textFill:"#fff",
    },
    position:[w/2,h/2]
    // x:w/2,
    // y:h/2
  })
  zr.add(text1)

  function lineFn(){
    let lines = [];
    for(let i = 0; i < 16; i++){
      let line = new zrender.Rect({
        shape:{
          x:w * Math.random(),
          y:h * Math.random(),
          width:w * Math.random(),
          height:10 * Math.random()
        },
        style:{
          fill:['red','blue','gold','pink'][Math.floor(Math.random()*4)],
          opacity:0
        }
      })
      zr.add(line)
      lines.push(line)
    }
    return lines
  }
  let lines = lineFn();

  setInterval(() => {
    text1.attr('position',[w/2 + Math.random()*30,h/2])
    for(let i = 0; i < lines.length; i++){
      lines[i].attr('shape',{
        x:w * Math.random(),
        y:h * Math.random(),
        width:w * (Math.random()-0.3),
        height:5 * Math.random()
      })
      lines[i].attr('style',{
        opacity:1
      })
    }
    setTimeout(() => {
      text1.attr('position',[w/2 ,h/2]);
      for(let i = 0; i < lines.length; i++){
      lines[i].attr('style',{
        opacity:0
      })
    }
    }, 100);
  }, 1000);
  
</script>